<template>
  <div>
    <!-- warning -->
    <div class="warning" v-show="isWarning">
      <div class="warning-content">
        <div class="iconfont icon-jiuzhenjilu"></div>
        <div class="warning-txt">{{warningTxt}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import WxValidate from '@/utils/WxValidate'
export default {
  name: "Warning",
  data () {
    return {
      // 显示警告
      isWarning: false,
      // 警告信息
      warningTxt: '填写有误',
      // 定时器id
      timeId: null,

      // 校验规则
      rules: {
        realName: {
          required: true,
          rangelength: [2, 8]
        },
        contact: {
          required: true,
          tel: true,
        },
        height: {
          required: true,
          range: [0, 300]
        },
        weight: {
          required: true,
          range: [0, 500]
        }
      },
      // 验证字段的提示信息，若不传则调用默认的信息
      messages: {
        realName: {
          required: '请输入姓名',
          rangelength: '请输入2~8个字姓名'
        },
        contact: {
          required: '请输入11位手机号码',
          tel: '请输入正确的11位手机号码',
        },
        height: {
          required: '请输入身高',
          range: '请输入正确的身高'
        },
        weight: {
          required: '请输入体重',
          range: '请输入正确的体重'
        }
      },
    }
  },
  methods: {
    // 单个校验
    checkData (key, val) {
      let obj = {}, rule = {}, message = {};
      obj[key] = val;
      rule[key] = this.rules[key];
      message[key] = this.messages[key];
      let Validate = new WxValidate(rule, message);
      // 不通过
      if (!Validate.checkForm(obj)) {
        let err = Validate.errorList
        return err;
      }
      return
    },

    // 提示信息
    showWarning (msg) {
      clearInterval(this.timeId)
      this.warningTxt = msg;
      this.isWarning = true
      this.timeId = setInterval(() => {
        this.isWarning = false
      }, 3000)
    },
  }
}
</script>

<style lang="scss" scoped>
// 警告框
.warning {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  font-size: 28rpx;
  color: #fff;
  // background-color: orange;
  background: linear-gradient(45deg, #ffd492, #ffa600);
  .warning-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rpx;
  }
}
</style>
